<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-row :gutter="24" class="search-bar">
        <el-col :span="8">
          <el-form-item label="产品名称" prop="productName" label-width="100px">
            <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable
              @keyup.enter.native="handleQuery" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="productName" label-width="100px">
            <el-input v-model="queryParams.enterpriseName" placeholder="请输入产品名称" clearable
                      @keyup.enter.native="handleQuery" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="submitSelectProducts" :disabled="selectedRows.length === 0">确定</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="qualificationList"
        @selection-change="handleSelectionChange"
        highlight-current-row
        :height="tableHeight"
        border
        style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="序"
          type="index"
          prop="index"
          width="35"
          :index="indexMethod"
        />
        <el-table-column
          label="发布时间"
          align="center"
          prop="releaseTime"
          width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.releaseTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类别"
          align="center"
          prop="productType"
          width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.product_type" :value="scope.row.productType" />
          </template>
        </el-table-column>
        <el-table-column
          label="产品名称"
          align="center"
          prop="productName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="产品介绍"
          align="center"
          prop="productRemark"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="产品规格"
          align="center"
          prop="productSpecs"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="供应商名称"
          align="center"
          prop="enterpriseName"
          width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="是否代理"
          align="center"
          prop="isProxy"
          width="70"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.isProxy === '已代理' ? 'success' : 'danger'"
              size="mini"
            >
              {{ scope.row.isProxy }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-container">
      <div class="left-info">
        <span>共 {{ total }} 条</span>
        <el-select v-model="queryParams.pageSize" size="mini" style="margin-left: 10px;" @change="handleSizeChange">
          <el-option label="15条/页" :value="15" />
          <el-option label="30条/页" :value="30" />
          <el-option label="50条/页" :value="50" />
        </el-select>
      </div>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[15, 30, 50]"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          background>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  productList,
  getList,
  delList,
  addList,
  updateList,
} from "@/api/list/list";
export default {
  name: "SupplierQualification",
  dicts: ['product_type', 'product_status', 'qualification_resume_status', 'product_segmentation_classification'],
  props: {
    bId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectedRows: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 资质产品列表
      qualificationList: [],
      // 表格高度
      tableHeight: 380,
      // 查询参数
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        productType: null,
        productName: null,
        productRemark: null,
        productSpecs: null,
        releaseTime: null,
        isProxy: null,
        enterpriseId: null,
        organizationId: null,
        organizationName: null,
        creationTime: null,
        createId: null,
        createName: null,
        enterpriseName:null,
      },
    };
  },
  emits: ['selectProduct'],
  created() {
    this.getList();
  },
  mounted() {
    this.adjustTableHeight();
    window.addEventListener('resize', this.adjustTableHeight);
  },
  updated() {
    this.adjustTableHeight();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.adjustTableHeight);
  },
  methods: {
    // 调整表格高度以填充满对话框
    adjustTableHeight() {
      this.$nextTick(() => {
        const container = this.$el.querySelector('.app-container');
        if (container) {
          const formHeight = this.$el.querySelector('.search-bar') ? this.$el.querySelector('.search-bar').offsetHeight : 0;
          const actionBarHeight = this.$el.querySelector('.action-bar') ? this.$el.querySelector('.action-bar').offsetHeight : 0;
          const bottomHeight = this.$el.querySelector('.bottom-container') ? this.$el.querySelector('.bottom-container').offsetHeight : 0;
          const padding = 40; // 容器内边距和其他元素的预留空间

          this.tableHeight = container.offsetHeight - formHeight - actionBarHeight - bottomHeight - padding;
        }
      });
    },
    /** 查询资质产品列表 */
    getList() {
      this.loading = true;
      this.queryParams.organizationId = this.$store.state.user.info.orgId;
      productList(this.queryParams).then(response => {
        this.qualificationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    formatRemark(remark) {
      if (!remark) return { displayedText: '', title: '' };
      const displayedText = remark.length > 50 ? remark.substring(0, 80) + '...' : remark;
      const title = remark.length > 50 ? remark.substring(0, 80) + '...' : remark;
      return { displayedText, title };
    },
    //序号展示
    indexMethod(index) {
      return index + 1;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.selectedRows = selection;
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 处理页数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 处理当前页变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 更多明确地导出submitSelectProducts方法供父组件调用
    submitSelectProducts() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择至少一个产品');
        return false;
      }

      const selectedProducts = this.selectedRows.map(item => {
        return {
          id: item.id,
          name: `${item.productName}（${item.enterpriseName}）`,
          productName: item.productName,
          enterpriseName: item.enterpriseName,
          specs: item.productSpecs,
          type: item.productType
        };
      });

      this.$emit('selectProduct', selectedProducts);
      return true;
    },
    // 取消选择
    cancelSelect() {
      this.$emit('selectProduct', []);
    }
  }
};
</script>

<style>
.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
}

.bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.left-info {
  display: flex;
  align-items: center;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.search-bar {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 10px;
}

.table-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 0 10px 10px 10px;
  margin-bottom: 10px;
}

.fixed-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  padding: 10px 20px;
  text-align: right;
  width: 100%;
  z-index: 100;
}
</style>
